<template>
	<div class="locate-blk">
		<el-tree
			:data="treeData"
			node-key="id"
			:props="defaultProps"
			@node-click="handleNodeClick"
			unselectable="on"
			:expand-on-click-node="false"
			:default-expanded-keys="defaultExpandedKeys"
			:indent="36">
				<div class="tree-node" :class="{active: activeDataId==node.data.id}" slot-scope="{ node, data }">{{ data.name }}</div>
			</el-tree>
	</div>
</template>
<script>
export default {
	name: 'IndustryAuthority',
	props: {
		selectedData: {
			type: Object,
			default () {
				return null
			}
		},
	},
	computed: {
		defaultExpandedKeys () {
			if(this.selectedData) {
				return [this.selectedData.id]
			}
			return []
		}
	},
	watch: {},
	data () {
		return {
			treeData: [],
			defaultProps: {
			  children: 'orgs',
			  label: 'name'
			},
			activeDataId: '',
			selected: null
		}
	},
	methods: {
		getData () {
			this.openFullLoading()
			this.$get('/business/business/industryAuthoritiesTreeList').then(res => {
				this.closeFullLoading()
				this.treeData = [res.data]
			}, (err) =>{
				this.closeFullLoading()
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		handleNodeClick(data,node,n) {
			this.activeDataId = data.id
			this.selected = data
		},
	    getSelected () {
	    	return this.selected
	    }
	},
	mounted () {
		this.getData()
		if(this.selectedData){
			this.activeDataId = this.selectedData.id
			this.selected = this.selectedData
		}
		
	},
	destroyed () {
		// 
	}
}
</script>
<style lang="less" scoped>
.locate-map{
	width: 100%;
	height: 400px;
}
</style>